<template>
    <div class="sign-up-info">
        <div class="search-content">
            <el-input class="search-content-input" v-model="searchContent.phone" placeholder="手机号"></el-input>
            <el-input class="search-content-input" v-model="searchContent.store" placeholder="店铺"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="signUpList" border :height="oHeight">
                <el-table-column
                        align="center"
                        prop="id"
                        label="ID"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="activityName"
                        label="名称"
                        min-width="120"></el-table-column>
                <el-table-column
                        align="center"
                        prop="store"
                        label="咨询店铺"
                        min-width="120"></el-table-column>
                <el-table-column
                    align="center"
                    prop="username"
                    label="姓名"
                    min-width="120"></el-table-column>
                <el-table-column
                        align="center"
                        prop="phone"
                        label="手机号"
                        min-width="120"></el-table-column>
                <el-table-column
                        align="center"
                        label="报名时间"
                        min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.signUpTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="isDeal"
                        label="是否成交"
                        min-width="60">
                    <template slot-scope="scope">
                        <el-switch
                                @change="switchUse(scope.row)"
                                v-model="scope.row.isDeal == 2">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <a class="btn-bottom" :href="exportLink">导出</a>
                </div>
                <div class="paginationOne">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchContent.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchContent.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
	import Qs from 'qs';

	export default {
		data() {
			return {
				oHeight: 800,
				searchContent: {
					phone: '',
					store: '',
					currentPage: 1,
					pageSize: 10
				},
				signUpList: [],
				total: 0
			}
		},
		computed: {
			exportLink() {
				const data = {};
				data.export = 'yes';
				data.member_mobile = this.searchContent.phone;
				data.store_name = this.searchContent.store;
				let domain = document.domain;
				if (domain != 'admin.mycjj.com' && domain != 'admin.chejj.cn') {
					domain = 'admin.chejj.cn'
				}
				return location.protocol + '//' + domain.replace('admin', 'api') + '/admin/activity/index.php?act=finance_lease&op=flr_list&' + Qs.stringify(data);
			}
		},
		methods: {
			switchUse(signUp) {
				this.$http.post('/admin/activity/index.php?act=finance_lease&op=update_flr_is_deal', {
					id: signUp.id,
					flr_is_deal: signUp.isDeal == 1 ? 2 : 1
				}).then(res => {
					if (res.code == 1) {
						signUp.isDeal = signUp.isDeal == 1 ? 2 : 1;
					} else {
						alert(res.msg);
					}
				})
			},
			resetSearchData() {
				this.searchContent.phone = '';
				this.searchContent.store = '';
			},
			search() {
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleSizeChange(pageSize) {
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getListData();
			},
			getListData() {
				const data = {};
				data.page = this.searchContent.currentPage;
				data.eachNum = this.searchContent.pageSize;
				data.member_mobile = this.searchContent.phone;
				data.store_name = this.searchContent.store;

				this.$http.post('/admin/activity/index.php?act=finance_lease&op=flr_list', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.list.length) {
							this.signUpList = res.data.list.map(function(item) {
								return {
									id: item.flr_id * 1,
									activityName: item.flr_title_name,
									store: item.flr_store_name,
									username: item.flr_user_name,
									phone: item.flr_user_mobile,
									signUpTime: item.flr_signup_time * 1000,
									isDeal: item.flr_is_deal * 1
								}
							});
							this.total = parseInt(res.data.totalNum);
						} else {
							this.signUpList = [];
							this.total = 0;
						}
					}
					else if (res.code == 2001) {
						this.signUpList = [];
						this.total = 0;
					}
					else {
						alert(res.msg);
					}
				})
			}
		},
		mounted() {
			resize(this)
		},
		created() {
			this.getListData();
		},
		components: {
		},
		name: "sign-up-info"
	}
</script>

<style lang="scss" scoped>
    .sign-up-info {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .time-range-wrapper {
                .time-range-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
</style>
